.widget {
  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;
  height: 160px;
  padding: 8px 12px;
  border-radius: 16px;

  background-color: var(--bg-block);
  box-shadow: 1px 1px 2px 3px var(--soft-shadow);

  text-align: left;

  &.medium {
    grid-column-start: span 2;
  }

  &.large {
    grid-row-start: span 2;
    grid-column-start: span 2;
    height: 328px;
  }

  &.full {
    padding: 0;
  }
}

.widget-header {
  padding-bottom: 4px;
  font-weight: 500;
  font-size: 18px;
  transform: skew(-8deg);

  .refresh-button {
    transform: skew(8deg);
  }
}

.widget-body {
  position: relative;
  flex: 1;
  overflow-y: auto;

  &.full {
    margin: -8px -12px;
  }
}

.widget-content {
  position: absolute;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;

  width: 100%;
  min-height: 100%;
}

.widget-hint-text {
  color: var(--dark-grey);
  font-size: 12px;
  text-align: center;
}
